<template>
  <div class="page-list-live">
    <PageList>
      <template #header>历史位置查询</template>

      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人员位置查询" name="peopleLocation">
            <ListFilter :form="peopleFilter" :key-list="peopleKeyList" @search="handleSearch" @reset="handleReset" />
          </el-tab-pane>
          <el-tab-pane label="车辆位置查询" name="carLocation">
            <ListFilter :form="carFilter" :key-list="carKeyList" @search="handleSearch" @reset="handleReset" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </PageList>
    <div v-show="!IsOnline" class="alert-warp">
      <div class="alert-banner">当前客户端离线</div>
    </div>
    <component :is="activeName" :auto-gate-list="autoGateList" :base-station-list="baseStationList" />
  </div>
</template>
<script>
import listMixin from '@/mixins/list'
import ListFilter from '@/components/ListFilter'
import { area, autoGate, baseStation, GetOnlineStatus } from '@/api/api'
export default {
  components: {
    ListFilter,
    carLocation: () => import('./components/carLocation'),
    peopleLocation: () => import('./components/peopleLocation')
  },
  mixins: [listMixin],
  data() {
    return {
      IsOnline: true,
      // 区域
      areaList: [],
      // 设备
      equipmentList: [],
      // 闸机
      autoGateList: [],
      // 基站
      baseStationList: [],
      peopleFilter: {
        'baseStation.area.name': {
          label: '区域',
          placeholder: '请选择区域',
          type: 'select',
          arr: this.areaList
        },
        parntd: {
          label: '读卡设备',
          placeholder: '请选择读卡设备',
          type: 'select',
          arr: this.equipmentList
        },
        enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
        keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
      },
      carFilter: {
        'baseStation.area.name': {
          label: '区域',
          placeholder: '请选择区域',
          type: 'select',
          arr: this.areaList
        },
        parntd: {
          label: '读卡设备',
          placeholder: '请选择读卡设备',
          type: 'select',
          arr: this.equipmentList
        },
        enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
        keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
      },
      peopleKeyList: ['employee.accessCardID', 'employee.name', 'employee.rfid'],
      carKeyList: ['car.plateNumber', 'car.carType', 'car.rfid'],
      activeName: 'peopleLocation'
    }
  },
  mounted() {
    this.threeList()
    this.CheckOnlinStatus()
  },
  methods: {
    async CheckOnlinStatus() {
      const res = await GetOnlineStatus()
      if (res.code === 200) {
        this.IsOnline = res.data
        console.info('  this.IsOnline', this.IsOnline)
      }
    },
    // 区域
    async areaHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await area('post', obj, false)
        if (res.code === 200) {
          // this.areaList = [{
          //   label: '空',
          //   value: '空'
          // }]
          this.areaList = []
          res.data.items.map((item) => {
            this.areaList.push({
              label: item.name,
              value: item.name
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询闸机
    async autoGateHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await autoGate('post', obj, false)
        if (res.code === 200) {
          this.autoGateList = []
          res.data.items.map((item) => {
            this.equipmentList.push({
              label: item.name,
              value: item.name
            })
            this.autoGateList.push({
              label: item.name,
              value: item.id
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询基站
    async baseStationHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await baseStation('post', obj, false)
        if (res.code === 200) {
          this.baseStationList = []
          res.data.items.map((item) => {
            this.equipmentList.push({
              label: item.name,
              value: item.name
            })
            this.baseStationList.push({
              label: item.name,
              value: item.id
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询区域，闸机，基站
    async threeList() {
      this.equipmentList = []
      await this.areaHandler()
      await this.autoGateHandler()
      await this.baseStationHandler()
      this.$nextTick(() => {
        this.peopleFilter = {
          'baseStation.area.name': {
            label: '区域',
            placeholder: '请选择区域',
            type: 'select',
            arr: this.areaList
          },
          parntd: {
            label: '读卡设备',
            placeholder: '请选择读卡设备',
            type: 'select',
            arr: this.equipmentList
          },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        }
        this.carFilter = {
          'baseStation.area.name': {
            label: '区域',
            placeholder: '请选择区域',
            type: 'select',
            arr: this.areaList
          },
          parntd: {
            label: '读卡设备',
            placeholder: '请选择读卡设备',
            type: 'select',
            arr: this.equipmentList
          },
          enterTime: { label: '进入隧道时间', type: 'date', arr: ['enterTime', 'leaveTime'] },
          keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .sc-list-filter-col {
    width: auto;
  }
</style>
